import { useSearchParams } from "react-router"
import type { Issue } from "../api/type/issueType"
import { useEffect, useState } from "react"
import { reqGetIssueById, reqGetIssueByPage } from "../api/issueApi"
import { Title } from "../components/Content/title"
import { IssueCard } from "../components/IssueCard"
import { Empty, Pagination } from "antd"

export const Search = ()=>{
    const [searchParams] = useSearchParams()
    const type = searchParams.get("type")
    const [list,setList] = useState<Issue[]>([])
    const value = searchParams.get("value");
    const [nowP,setNowP] = useState(1);
    const [total,setTotal] = useState(0);
    const getList = async ()=>{
        if(type === "issue"){
            const {
                data:{list,total}
            } = await reqGetIssueByPage({
                page:nowP,
                size:5,
                searchValue:value!,
            })
            setTotal(total)
            setList(list)
        }
    }
    useEffect(()=>{
        setNowP(1)
        getList()
        console.log("111");
        
    },[value,type])
    useEffect(()=>{
        getList()
    },[nowP])
    if(type === "issue"){
        return (
            <>
                <Title title="搜索结果"></Title>
                {list.length > 0 ? (
                    <>
                        {list.map((item)=>(<IssueCard {...item} key = {item._id} ></IssueCard>))}
                        <Pagination
                            align="center"
                            current={nowP}
                            total={total}
                            pageSize={5}
                            onChange={(e)=>{setNowP(e)}}
                        ></Pagination>
                    </>
                ):(
                    <Empty description={"暂无搜索结果"}></Empty>
                )}
            </>
        )
    }else{
        <>
            <Title title="搜索结果"></Title>
        </>
    }
}